<!-- 基于el-table的二次封装 -->
<template>
  <div>
    <!-- 有需要自定义el-table-column的 -->
    <el-table :data="tableList" border stripe>
      <el-table-column
        v-for="(item, index) in tableType"
        :key="index"
        :label="item.lable"
        :prop="item.prop"
      >
        <slot v-if="item.type !== ''" :name="item.type"></slot>
      </el-table-column>
      <el-table-column :label="operation">
        <template slot-scope="{ row }">
          <!--operate最后一列开启插槽模式  -->
          <slot name="operate" v-if="operate" :value="row"> </slot>
          <template v-else>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-edit"
              v-if="Edit"
              circle
              @click="edit(row)"
            />&nbsp;&nbsp;
            <el-popconfirm title="确定删除吗？" v-if="Del" @confirm="del(row)">
              <el-button
                slot="reference"
                size="small"
                type="danger"
                icon="el-icon-delete"
                circle
                
              />
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div v-if="pagination">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="current"
        :page-sizes="pagesize"
        :page-size="page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 表格里面的Data
    tableList: {
      type: Array,
      // default: [],
      required: true,
    },
    //表格里面的label 和表格里面的prop
    tableType: {
      type: Array,
      // default:[]
      required: true,
    },
    // 表格是否需要修改按钮
    Edit: {
      type: Boolean,
      default: true,
    },
    // 表格是否开启前面的index
    index: {
      type: Boolean,
      default: true,
    },
    // 开启操作插槽
    operate: {
      type: Boolean,
      default: false,
    },
    // 表格是否需要删除按钮
    Del: {
      type: Boolean,
      default: true,
    },
    //自定义最后一行的label,默认是操作
    operation: {
      type: String,
      default: "操作",
    },
    // 总数
    total: {
      type: Number,
    },
    // 页面值
    page: {
      type: Number,
    },
    // 页码值
    current: {
      type: Number,
    },
    // 分页器的值
    pagesize: {
      type: Array,
      // default:[4, 10, 20, 30]
      default: () => {
        return [4, 10, 20, 30];
      },
    },
    // 是否开启分页
    pagination: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    // 修改按钮触发事件
    edit(row) {
      this.$emit("edit", row);
    },
    // 删除按钮触发事件
    del(row) {
      this.$emit("del", row);
    },
    // 每页条数
    sizeChange(val) {
      this.$emit("page", val);
    },
    // 页码改变事件
    currentChange(val) {
      this.$emit("limit", val);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>